<template>
  <div class="layout col full">
    <work-header></work-header>
    <div class="row row-span">
      <work-menu></work-menu>
      <div class="col-span col" style="padding: 10px;background:#F4F5F7">
        <div class="row-span padding-zero" style="overflow:auto;">
          <router-view :key=" currentPage" class="row-span" />
        </div>
      </div>
    </div>
    <!-- <work-reminder></work-reminder> -->
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { State, namespace } from "vuex-class";
import WorkHeader from "~/components/workspace/work-header.vue";
import WorkMenu from "~/components/workspace/work-menu.vue";
import WorkReminder from "~/components/workspace/work-reminder.vue";
import { ReminderService } from "~/utils/reminder.service";

const workspaceModule = namespace("workspace");

@Component({
  components: {
    WorkHeader,
    WorkMenu,
    WorkReminder
  }
})
export default class WorkSpaceLayout extends Vue {
  @workspaceModule.State currentPage;
  @workspaceModule.State currentTabs;
  @workspaceModule.State unReadCount;

  mounted() {
    if (this.unReadCount) {
      this.$reminder.notify(options =>
        this.$createElement(WorkReminder, options)
      );
    }

    // 收到消息通知时更新未读消息
    this.$reminder.addMessageListener().subscribe(data => {
      // 通知消息
      this.$reminder.notify(options =>
        this.$createElement(WorkReminder, options)
      );
    });
  }
}
</script>

<style lang="less" scoped>
.component.workspace-layout {
  height: 100%;
  .customer-container {
    height: 100%;
    .customer-container {
      height: 100%;
    }
  }
}
</style>
